<template>
  <div class="timeline-component">
    <el-timeline>
      <el-timeline-item
        v-for="(活动, index) in 活动列表"
        :key="index"
        :timestamp="活动.时间戳"
        :type="活动.类型"
        :color="活动.颜色"
        :size="活动.尺寸"
        :icon="活动.图标"
        :placement="活动.位置"
      >
        {{ 活动.内容 }}
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script>
export default {
  name: 'TimelineComponent',
  componentName: '时间线',
  icon: 'el-icon-time',
  defaultProps: {
    活动列表: [
      {
        内容: '活动 1',
        时间戳: '2023-01-01',
        类型: 'primary',
        颜色: '',
        尺寸: 'normal',
        图标: '',
        位置: 'bottom'
      },
      {
        内容: '活动 2',
        时间戳: '2023-01-02',
        类型: 'success',
        颜色: '',
        尺寸: 'normal',
        图标: '',
        位置: 'bottom'
      },
      {
        内容: '活动 3',
        时间戳: '2023-01-03',
        类型: 'warning',
        颜色: '',
        尺寸: 'normal',
        图标: '',
        位置: 'bottom'
      }
    ]
  },
  props: {
    活动列表: {
      type: Array,
      default: () => [
        {
          内容: '活动 1',
          时间戳: '2023-01-01',
          类型: 'primary',
          颜色: '',
          尺寸: 'normal',
          图标: '',
          位置: 'bottom'
        },
        {
          内容: '活动 2',
          时间戳: '2023-01-02',
          类型: 'success',
          颜色: '',
          尺寸: 'normal',
          图标: '',
          位置: 'bottom'
        },
        {
          内容: '活动 3',
          时间戳: '2023-01-03',
          类型: 'warning',
          颜色: '',
          尺寸: 'normal',
          图标: '',
          位置: 'bottom'
        }
      ]
    }
  }
};
</script>

<style scoped>
.timeline-component {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}
</style>